<template>
  <div>
    <div class="header">
      <div class="bg"></div>
      <div class="user">
        <div class="photo">
          <van-image
            round
            width="6rem"
            height="6rem"
            :src="userFace"
            @click="toUserDetail"
          />
        </div>
        <div class="name">{{ userInfo.username }}</div>
        <div class="flag">秋名山赛道，我是第一名！</div>
        <div class="bottom">
          <!-- 用户余额 -->
          <div class="left">
            <p>账户余额</p>
            <p>{{Money}}元</p>
          </div>
          <div class="right">
            <van-button round class="btn" @click="openMonenyPanel"
              >充值</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="optionBody">
      <van-cell
        title="常用地址"
        @click="CommonAddress"
        is-link
        class="spanTitle"
        icon="location-o"
      ></van-cell>
      <van-cell
        title="联系我们"
        is-link
        class="spanTitle"
        icon="phone-o" @click="contact"
      />
      <van-cell
        title="留言列表"
        is-link
        class="spanTitle"
        @click="message"
        icon="orders-o"
      />
    </div>
    <div class="logout_btn">
      <van-button round block class="logoutBtn" @click="openLogoutPanel"
        >退出登录</van-button
      >
    </div>

    <!-- 充值面板 -->
    <van-action-sheet v-model="show" title="充值">
      <div class="content">
        <van-form ref="form">
          <van-field
            v-model="subMoney"
            label="充值金额"
            placeholder="请输入充值金额"
            :rules="[{ required: true, message: '请输入充值金额' }]"
          />
          <div style="margin: 16px">
            <van-button round block @click="submitMoney" class="subBtn"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { get } from "@/http/axios";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      Money:1000,
      userFace:require('../../assets/tx.png'),
      show: false,
      //   充值金额
      subMoney: 0,
      //   successSubmit:"",
    };
  },
  computed: {
    // 引入用户信息对象
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入用户数据
    ...mapActions("user", ["getUserInfo"]),
    // 查询用户信息
    queryUser() {
      this.getUserInfo();
    },
    // 打开充值面板
    openMonenyPanel() {
      this.show = true;
    },
    // 提交金额
    async submitMoney() {
      this.$refs.form
      .validate()
      .then(async () => {
        this.Money = Number(this.Money) + Number(this.subMoney) 
        this.show = false;
      })
      .catch(() => {
        
      });
    },
    // 点击联系我们
    contact(){
       Toast({
        duration: 5000, // 持续展示 toast
        message: '请拨打电话18078497578',
        icon: require('../../assets/telephone.png'),
      });
    },
    // 打开退出登录面板
    openLogoutPanel() {
      this.$dialog
        .confirm({
          message: "是否退出登录",
        })
        .then(() => {
          localStorage.removeItem('token')
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    //跳转到信息页面
    toUserDetail(){
      this.$router.push("mydetail");
    },
    // 常用地址
    CommonAddress(){
      Toast({
        duration: 5000, // 持续展示 toast
        message: '红星驾校',
        icon: require('../../assets/address.png'),
      });
    },
    message(){
      Toast({
        duration: 5000, // 持续展示 toast
        message: '正在开发中，敬请期待...',
        icon: require('../../assets/hourglass.png'),
      });
    },
  },
  created() {
    this.queryUser();
  },
};
</script>

<style scoped>
.bg {
  height: 180px;
   background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.user {
  width: 80%;
  height: 170px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: rgb(204 204 204) 0px 0px 10px;
  border-radius: 8px;
  padding: 0px 1em;
}
.user .photo {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: rgb(191, 115, 255);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.user .flag {
  color: #ccc;
  font-size: 12px;
  text-align: center;
}
.user .name {
  margin-top: 3.5em;
  text-align: center;
}
.user .bottom {
  display: flex;
  justify-content: space-around;
}
.user .bottom .left p:first-child {
  margin-top: 15px;
  font-size: 16px;
  color: rgb(153, 153, 153);
}
.user .bottom .left p:last-child {
  font-size: 22px;
  margin-top: -10px;
  color: #F4B4B6;
}
.user .bottom .btn {
  background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
  color: #fff;
  margin-top: 20px;
}
.subBtn {
  color: white;
  /* background: rgb(120, 121, 255);
  border-color: rgb(120, 121, 255); */
  background-color: #F4B4B6;
}
.user .bottom .content {
  height: 120px;
}
.optionBody {
  margin: 130px auto;
  box-shadow: rgb(158 117 255 / 20%) 4px 4px 4px 0px;
  transition: all 0.3s ease 0s;
  width: 95%;
  border-radius: 5px;
}
.optionBody .spanTitle {
  font-size: 16px;
  color: rgb(99, 99, 99);
}
.logout_btn {
  width: 53%;
  height: 40px;
  text-align: center;
  border-radius: 22px;
  line-height: 40px;
  margin: 2em auto 0px;
}
.logoutBtn {
  background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
  color: rgb(255, 255, 255);
  font-size: 16px;
}
.van-cell__left-icon {
  margin-right: 8px;
  font-size: 22px;
  color: #F4B4B6;
}
</style>